<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放器</title>
    <!-- 引入外部css文件 -->
    <!-- 初始化 -->
    <link rel="stylesheet" href="css/initialize.css">
    <!-- 播放器页面 -->
    <link rel="stylesheet" href="css/playMusic.css">
</head>

<body>
    <!-- 音乐播放页面 -->
    <div class="display-music-page">
        <!-- 网易云logo -->
        <div class="music-logo">Netease Cloud Music</div>

        <!-- 搜索框 -->
        <input class="display-area-search" placeholder="搜索音乐(建议精确搜索)"></input>

        <!-- 搜索结果 -->
        <ul class="search-result-box">
            <!-- 此处动态生成li -->
        </ul>

        <!-- 放大镜 -->
        <div class="search-magnifier"></div>

        <!-- 歌名 -->
        <p class="current-song-name"></p>

        <!-- 歌名补充 -->
        <p class="current-alia"></p>

        <!-- 专辑图 -->
        <div class="current-album-pic"></div>

        <!-- 歌手 -->
        <div class="current-player"></div>

        <!-- 专辑名 -->
        <div class="current-album-name"></div>

        <!-- 评论区 -->
        <div class="comment-scroll">
            <!-- 滚动区域 -->
            <div class="scroll">
                <div class="comments-item">
                    <div class="comments-head"></div>
                    <div class="comments-name"></div>
                    <div class="comments-time"></div>
                    <div class="comments-like"></div>
                    <div class="comments-content"></div>
                    <button class="commments-give-like">点赞</button>
                </div>
                <div class="comments-item">
                    <div class="comments-head"></div>
                    <div class="comments-name"></div>
                    <div class="comments-time"></div>
                    <div class="comments-like"></div>
                    <div class="comments-content"></div>
                    <button class="commments-give-like">点赞</button>
                </div>
                <div class="comments-item">
                    <div class="comments-head"></div>
                    <div class="comments-name"></div>
                    <div class="comments-time"></div>
                    <div class="comments-like"></div>
                    <div class="comments-content"></div>
                    <button class="commments-give-like">点赞</button>
                </div>
            </div>
        </div>

        <!-- 播放/暂停按钮 -->
        <div class="play-pause">
            <div class="pause play-pause-btn"></div>
        </div>

        <!-- 进度条盒子 -->
        <div class="progress-bar-box">
            <div class="progress-bar"></div>
        </div>

        <!-- 音乐时长 -->
        <div class="music-duration"></div>

        <!-- 音乐进度 -->
        <div class="music-progress"></div>

        <!-- 音量图标 -->
        <div class="volume-pic"></div>

        <!-- 音量条 -->
        <div class="volume-bar-box">
            <div class="volume-bar"></div>
        </div>

        <!-- 音量大小 -->
        <div class="volume-value">100%</div>

        <!-- 歌词盒子 -->
        <div class="current-song-words">
            <div class="song-words-scroll"></div>
        </div>

        <!-- <div class="play-record-box">最近播放
            <ul class="play-record-ul"></ul>
        </div> -->

        <!-- audio标签 -->
        <audio src="" class="audio" controls="controls"></audio>
    </div>



    <!-- 引入外部js文件 -->
    <!-- ajax请求封装函数 -->
    <script src="js/ajaxRequest.js"></script>
    <!-- 音乐播放器 -->
    <script src="js/playMusic.js"></script>
    <!-- 执行特殊功能的封装函数 -->
    <script src="js/encapsulation.js"></script>
</body>

</html>